<!DOCTYPE HTML>
<html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript" src="canvas-blending-helpers.js"></script>
<script>
test(function(t) {
    function checkShadowColor(i, context, sigma) {
        var expectedShadowColor = blendColors([192 / 255, 192 / 255, 192 / 255, 1], [1, 129 / 255, 129 / 255, 1], i);
        var ac = context.getImageData(11, 11, 1, 1).data;
        assert_approx_equals(ac[0], expectedShadowColor[0], sigma);
        assert_approx_equals(ac[1], expectedShadowColor[1], sigma);
        assert_approx_equals(ac[2], expectedShadowColor[2], sigma);
        assert_approx_equals(ac[3], expectedShadowColor[3], sigma);
    }

    var canvas = document.createElement('canvas');
    var sigma = 5;
    canvas.width = 12;
    canvas.height = 12;
    context = canvas.getContext('2d');

    for (var i = 0; i < blendModes.length; ++i) {
        context.clearRect(0, 0, 12, 12);
        context.save();
        drawBackdropColorWithShadowInContext(context);
        context.globalCompositeOperation = blendModes[i];
        drawSourceColorRectOverShadow(context);
        checkBlendModeResult(i, context, 5);
        checkShadowColor(i, context, sigma);
        context.restore();
    }
}, 'Series of tests to ensure correct results on applying different blend modes when drawing a rectangle with shadow.');
</script>
